<template>
	<!-- 标签 -->
	<view v-if="draw" class="_focus-tag-shell-class" :class="classShell" @click.stop="compClick">
		
		<!-- 显示文字 -->
		<text class="_focus-tag-text-class" :class="classText">{{text}}</text>
		
		<!-- 关闭按钮容器 -->
		<view v-if="closeable==true||closeable=='true'" class="_focus-tag-close-box-class" @click.stop="closeClick">
			<!-- 字体图标 -->
			<focus-icon name="fi-close" size="22" :color="colorIcon"></focus-icon>
		</view>
		
		<!-- 关闭按钮不显示时候的占位 -->
		<view v-else style="width:12rpx; height:12rpx;"></view>
		
	</view>
</template>


<script>
	// 字体图标 组件引入
	import focusIcon from '../focus-icon/focus-icon.vue';
	
	/**
	 * 标签
	 * @description vue/nvue通用，用于标记和区分
	 * @tutorial
	 * @property {String} tag 组件自定义标识，默认：focus-tag
	 * @property {String} mode = [dark|light] 标签外观模式，默认：dark
	 *   @value dark 深色背景模式(默认)
	 *   @value light 浅色背景模式
	 * @property {String} text 标签文字内容
	 * @property {String} color = [primary|success|warning|error|info] 标签颜色，默认：primary
	 *   @value primary 基本主体色
	 *   @value success 完成色
	 *   @value warning 警告色
	 *   @value error 错误色
	 *   @value info 信息色
	 * @property {String,Boolean} closeable = [false|true] 是否开启关闭按钮，默认：false
	 *   @value false 取消关闭按钮
	 *   @value true 启用关闭按钮
	 * @event {Function} close 点击标签关闭按钮触发
	 * @event {Function} click 点击标签触发
	 */
	export default {
		name: "focus-tag",
		// 组件需要获取数据
		props: {
			"tag": { type: String, default: 'focus-tag' },
			"mode": { type: String, default: 'dark' },
			"text": { type: String, default: '' },
			"color": { type: String, default: 'primary' },
			"closeable": { type: [String,Boolean], default: false },
		},
		
		// 组件定义
		components: {
			focusIcon
		},
		
		// 页面数据
		data() {
			return {
				// 是否渲染组件
				draw: true
			}
		},
		
		// 计算属性
		computed: {
			// 标签外框class
			classShell() {
				// 初始化
				var arr_class = [];
				var str_class = '';
				
				// mode模式为：深色模式
				if (this.mode == 'dark')
				{
					// 背景颜色(深色)
					arr_class.push('_focus-tag-bg-'+this.color);
				}
				
				// mode模式为：浅色模式
				else if (this.mode == 'light' && this.color.length)
				{
					// 背景颜色(浅色)
					arr_class.push('_focus-tag-bg-'+this.color+'-light');
				}
				
				// 循环样式对象
				for (let k in arr_class) { str_class += arr_class[k] + ' '; }
				// 结果返回
				return str_class;
			},
			// 标签文字class
			classText() {
				var arr_class = [];
				var str_class = '';
				
				// mode模式为：深色模式
				if (this.mode == 'dark')
				{
					// 文字颜色固定为“白色”
					arr_class.push('_focus-tag-color-white');
				}
				
				// mode模式为：浅色模式 
				else if (this.color.length)
				{
					// 内置文字颜色
					arr_class.push('_focus-tag-color-'+this.color);
				}
				
				// 循环样式对象
				for (let k in arr_class) { str_class += arr_class[k] + ' '; }
				// 结果返回
				return str_class;
			},
			// 字体图标颜色
			colorIcon() {
				var str_color = '';
				
				// mode模式为：深色模式
				if (this.mode == 'dark')
				{
					// 文字颜色固定为“白色”
					str_color = 'white';
				}
				
				// mode模式为：浅色模式 
				else if (this.color.length)
				{
					// 内置文字颜色
					str_color = this.color;
				}
				
				return str_color; 
			},
		},
		
		// 页面事件
		methods: {
			
			// ================================== 元素事件
			// 标签组件 点击
			compClick(ev) {
				// 点击事件回调触发
				this.$emit('click', { "tag": this.tag });
				// 取消冒泡
				// #ifdef APP-NVUE
				ev.stopPropagation();
				// #endif
			},
			
			// 关闭按钮 点击
			closeClick(ev) {
				// 是否启用了关闭功能
				if (this.closeable==true || this.closeable=='true')
				{
					// 销毁组件
					this.draw = false;
					// 点击事件回调触发
					this.$emit('close', { "tag": this.tag });
				}
				// 取消冒泡
				// #ifdef APP-NVUE
				ev.stopPropagation();
				// #endif
			},
			
		},
		
	}
</script>


<style lang="scss">
	
	/* 标签容器 */
	._focus-tag-shell-class{ height: 36rpx; padding-left: 12rpx; border-radius: 8rpx; flex-direction: row; justify-content: center; align-items: center;
		/* #ifndef APP-NVUE */
		display: flex; box-sizing: border-box;
		/* #endif */
	}
	
	/* 标签文字 */
	._focus-tag-text-class{ font-size: 24rpx; line-height: 30rpx; }
	
	/* 关闭按钮 */
	._focus-tag-close-box-class{ height: 36rpx; padding-left: 10rpx; padding-right: 12rpx; flex-direction: row; justify-content: center; align-items: center;
		/* #ifndef APP-NVUE */
		display: flex; margin-top: 4rpx;
		/* #endif */
	}
	
	/* 背景颜色 */
	._focus-tag-bg-primary{ background-color: $focus-color-primary; }
	._focus-tag-bg-success{ background-color: $focus-color-success; }
	._focus-tag-bg-warning{ background-color: $focus-color-warning; }
	._focus-tag-bg-error{ background-color: $focus-color-error; }
	._focus-tag-bg-info{ background-color: $focus-color-info; }
	._focus-tag-bg-primary-light{ background-color: $focus-color-primary-light; }
	._focus-tag-bg-success-light{ background-color: $focus-color-success-light; }
	._focus-tag-bg-warning-light{ background-color: $focus-color-warning-light; }
	._focus-tag-bg-error-light{ background-color: $focus-color-error-light; }
	._focus-tag-bg-info-light{ background-color: $focus-color-info-light; }
	/* 内置文字颜色 */
	._focus-tag-color-white{ color: #FFFFFF; }
	._focus-tag-color-primary{ color: $focus-color-primary; }
	._focus-tag-color-success{ color: $focus-color-success; }
	._focus-tag-color-warning{ color: $focus-color-warning; }
	._focus-tag-color-error{ color: $focus-color-error; }
	._focus-tag-color-info{ color: $focus-color-info; }
	
</style>